<!-- 封裝頁面標題 -->
<template>
    <div class="card-header" :style="headerStyle">
        <span>{{ title }}</span>
    </div>
</template>

<script setup>
import { computed, defineProps } from 'vue'

const props = defineProps({
    title: {
        type: String,
        default: '标题'
    },
    // 左侧装饰条样式
    indicator: {
        type: Object,
        default: () => ({
            width: '5px',
            height: '90%',
            color: '#1a75ff',
            radius: '10px',
            left: '0'
        })
    },
    // 标题文字样式
    textStyle: {
        type: Object,
        default: () => ({
            fontSize: '18px',
            fontWeight: 'bold',
            color: 'inherit'
        })
    },
    // 容器样式
    containerStyle: {
        type: Object,
        default: () => ({
            paddingLeft: '15px'
        })
    }
})

// 合并样式
const headerStyle = computed(() => ({
    ...props.textStyle,
    ...props.containerStyle,
    '--indicator-width': props.indicator.width,
    '--indicator-height': props.indicator.height,
    '--indicator-color': props.indicator.color,
    '--indicator-radius': props.indicator.radius,
    '--indicator-left': props.indicator.left,
    position: 'relative'
}))
</script>

<style scoped lang="less">
.card-header {
    &::before {
        content: "";
        position: absolute;
        width: var(--indicator-width);
        height: var(--indicator-height);
        left: var(--indicator-left);
        top: 50%;
        transform: translateY(-50%);
        border-radius: var(--indicator-radius);
        background-color: var(--indicator-color);
    }
}
</style>